<template>
  <div>
    <div class="wrapper">
      <div class="img_btn">
        <div class="img"><img :src="item1.coverImgUrl" alt="" /></div>
        <div class="btn" @click.stop="select_song(item1.id)">
          <div class="el-icon-caret-right"></div>
        </div>
      </div>
      <div class="wenzi">
       {{item1.name}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Play_list_item",
  props: {
    item1: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    select_song(id) {
      this.axios({
        method: "get",
        url: "/playlist/detail",
        params: {
          id,
        },
      })
        .then((res) => {
          // 将图片换成Select组件想要的键名
          res.data.playlist.picUrl = res.data.playlist.coverImgUrl;
          // 将收藏数量换成Select组件想要的名字
          res.data.playlist.subCount = res.data.playlist.subscribedCount;
          // 将标签成我们需要的格式
          let tags = [];
          res.data.playlist.tags.forEach((v) => {
            tags.push(v, "/");
          });
          // 删除最后一个斜杆
          tags.pop();

          // 将修改好格式的数据传回去
          res.data.playlist.tags = tags;
          // 将简介转换成Select组件需要的名字
          res.data.playlist.desc = res.data.playlist.description.split("\n");
          let subCount = String(res.data.playlist.subCount);
          if (subCount.length > 4) {
            res.data.playlist.subCount =
              subCount.slice(0, subCount.length - 4) + "万";
          }
          let shareCount = String(res.data.playlist.shareCount);
          if (shareCount.length > 4) {
            res.data.playlist.shareCount =
              shareCount.slice(0, shareCount.length - 4) + "万";
          }

          res.data.playlist.gd = "gd";

          res.data.playlist.desc.unshift("简介");
          this.$store.commit("select_acchor_data", res.data.playlist);
          // this.$router.push({ name: "Songdetails" });
          this.gd_all_play();
          return;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 在歌单点击全部播放
    gd_all_play() {
      // 获取到id
      let ids = [];
      this.$store.state.select_acchor_data.trackIds.forEach((v) => {
        ids.push(v.id);
      });
      ids = ids.join();

      // 获取到歌曲的详情信息
      this.axios({
        method: "get",
        url: "/song/detail",
        params: {
          ids,
        },
      })
        .then((res) => {
          for (let i = 0; i < res.data.songs.length; i++) {
            res.data.songs[i].playtime = this.hms(res.data.songs[i].dt);
          }
          console.log("我是音乐详情的音乐列表", res);
          let arr = res.data.songs;
          // 遍历数组，次数就是arr.length - 1
          for (var j = 0; j < arr.length - 1; j++) {
            for (var i = 0; i < arr.length - 1; i++) {
              if (arr[i].dt < arr[i + 1].dt) {
                var temp = arr[i];
                arr[i] = arr[i + 1];
                arr[i + 1] = temp;
              }
            }
          }
          for (let k = 0; k < arr.length; k++) {
            let play_info = {
              picUrl: "",
              name: "",
              playTime: "",
              song: {
                alias: [],
                artists: [{ name: "" }],
              },
              id: "",
              type: "music",
            };
            //   图片路劲
            play_info.picUrl = arr[k].al.picUrl;
            //   音乐名称层
            play_info.name = arr[k].name;
            //   播放时间
            play_info.playTime = arr[k].playtime;
            //   播放时间  毫秒形式
            play_info.playTimeS = arr[k].dt;
            //
            play_info.song.alias = "";
            //   歌手名称
            play_info.song.artists[0].name = arr[k].ar[0].name;
            //   音乐的id
            play_info.id = arr[k].id;
            this.$store.commit("play_list", play_info);
            if (k == 0) {
              this.$store.commit("musis_info", play_info);
              this.$store.commit("src_id", play_info.id);
              this.$store.dispatch("get_src");
            }
            this.loading = false;
          }
        })
        .catch((err) => {
          console.log("我是音乐详情的音乐列表", err);
        });
    },

    //     // 格式化时间
    hms(times) {
      let t = "";
      let m =
        Math.floor(times / 1000 / 60) < 10
          ? "0" + Math.floor(times / 1000 / 60)
          : Math.floor(times / 1000 / 60);
      let s =
        Math.floor((times / 1000) % 60) < 10
          ? "0" + Math.floor((times / 1000) % 60)
          : Math.floor((times / 1000) % 60);
      t = `${m}:${s}`;
      return t;
    },
  },
};
</script>

<style lang="less" scoped>
.wrapper {
  width: 220px;
  height: 280px;
  .img_btn {
    width: 100%;
    position: relative;
     cursor: pointer;
    .btn {
      position: absolute;
      bottom: 10px;
      right: 10px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: #fff;
      color: crimson;
      text-align: center;
      opacity: 0;
      cursor: pointer;
      .el-icon-caret-right {
        font-size: 40px;
        line-height: 50px;
      }
    }
    &:hover .btn {
      opacity: 1;
    }
    .img {
      width: 100%;
      img{
          width: 100%;
          border-radius: 10px;
      }
    }
  }
  .wenzi {
    padding: 0 15px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 这里是超出几行省略 */
    overflow: hidden;
  }
}
</style>